<template>
  <div class="Mfoot">
  <div  class="Mfoot-content">
    <Row>
        <i-col span="6" class="foot-left">
        <h2>公司</h2>
        <p @click="linkToPage('Introduce')">公司简介</p>
        <!-- <p @click="linkToPage('Contact')">联系我们</p> -->
        </i-col>
        <i-col span="6" class="foot-left">
        <h2>支持</h2>
        <p @click="linkToPage('HelpCenter')">帮助中心</p>
        <p @click="linkToPage('Safety')">隐私安全</p>
        <p @click="linkToPage('Laws')">法律法规</p>
        </i-col>
        <i-col span="6" class="foot-right">
        <h2>联系我们</h2>
        <p>客服电话  4000-151-555</p>
        <p>公司邮箱  5f@fivefoo.com</p>
        <p>公司地址  上海市杨浦区淞沪路303号11号楼505</p>
        </i-col>
        <i-col span="6" class="foot-i-con">
          <div class="wechatimgs" style="width:78px;">
            <h2>关注我们</h2>
            <img :src="wechatimgs" alt="" class="foot-img">
            <p>微信公众号</p>
          </div>
        </i-col>
     </Row>
     <div class="foot-p">
        <p>2015-2017 五孚（上海）数据科技有限公司版权所有. 保留一切权利.</p>
     </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
        wechatimgs:'img/wechat.png',
    };
  },
  methods: {
    /**@function linkToPage 跳转页面*/
    linkToPage(name) {
      let ths = this;
      switch (name) {
        //帮助中心
        case "HelpCenter":
          ths.$router.push({ name: "helpCenter" });
          break;
        //公司简介
        case "Introduce":
          ths.$router.push({ name: "introduce" });
          break;
        //联系我们
        case "Contact":
          ths.$router.push({ name: "contact" });
          break;
        //隐私安全
        case "Safety":
          ths.$router.push({ name: "safety" });
          break;
        //法律法规
        case "Laws":
          ths.$router.push({ name: "laws" });
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style scoped lang="scss">
body,
html {
  font-size: 62.5%;
}
.Mfoot {
  background-color: #424346;
  min-width: 1190px;
  .Mfoot-content {
    width: 1190px;
    margin: 0 auto;
    padding: 20px;
  }
  .Mfoot-content h2 {
    font-weight: normal;
    margin-bottom: 20px;
    color: #eeeeee;
    font-size: 1.6rem;
  }
  .Mfoot-content p {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #8c8e92;
    cursor: pointer;
  }
  .foot-p {
    text-align: center;
    margin: 30px 0;
    p {
      cursor: default;
    }
  }
  .foot-left {
    width: 18%;
  }
  .foot-right {
    width: 36%;
    p {
      cursor: default;
    }
  }
  .foot-img {
    margin: 8px 0 18px 20px;
  }
  .foot-i-con {
    width: 28%;
    cursor: pointer;
    position: relative;
    .hoverimg {
      display: none;
      position: absolute;
      left: 78px;
      width: 80px;
      height: 80px;
      top: 25px;
    }
    .wechatimg:hover .hoverimg {
      display: block;
    }
  }
}
</style>



